<template>
    <div class="main">
        <div>
            <el-space wrap :size="10">
                <el-input v-model="searchData.goodsTitle" clearable placeholder="请输入商品名称" />
                <el-input v-model="searchData.goodsBarcode" clearable placeholder="输入商品条形码" />
                <el-select v-model="searchData.goodsStatus" placeholder="请选择商品状态" style="width: 10vw;" clearable
                    @clear="searchData.goodsStatus = undefined">
                    <el-option :label="item.label" :value="item.value" v-for="item in goodsStatus" :key="item.value" />
                </el-select>
                <div>
                    <el-cascader v-model="searchData.categoryId" :options="options" :props="props" clearable
                        placeholder="请选择类目" />
                </div>
                <el-button type="primary" :icon="Search" @click="handlerSearch">查找</el-button>
                <el-button type="primary" :icon="Plus" @click="handlerAddGoods" v-permission="'product:product:create'">添加</el-button>
            </el-space>
        </div>
        <div class="goods-table">
            <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" border>
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column type="expand" label="sku信息" align="center" width="120">
                    <template #default="scope">
                        <el-table :data="scope.row.skuList" border>
                            <el-table-column label="商品条码" prop="barCode" align="center" />
                            <el-table-column label="商品规格" prop="title" align="center" />
                            <el-table-column label="商品库存" prop="stock" align="center" />
                            <el-table-column label="原价" prop="originalPrice" align="center" />
                            <el-table-column label="现价" prop="price" align="center" />
                            <el-table-column label="VIP价格" prop="vipPrice" align="center" />
                        </el-table>
                    </template>
                </el-table-column>
                <el-table-column prop="id" label="商品ID" align="center" width="120" />
                <el-table-column prop="title" label="名称" align="center" width="500" />
                <el-table-column prop="img" label="图片" align="center" width="110">
                    <template #default="scope">
                        <el-popover trigger="hover" placement="right" width="300px">
                            <template #default>
                                <div style="display: flex;justify-content: center;">
                                    <el-image style="width: 100%; height: 100%" :src="scope.row.img" />
                                </div>
                            </template>
                            <template #reference>
                                <div>
                                    <el-image style="width: 100px;height: 50px;" :src="scope.row.img" fit="contain" />
                                </div>
                            </template>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="商品详细介绍" align="center" width="110">
                    <template #default="scope">
                        <el-button type="primary" @click="handlrSee(scope.row)">查看</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="categoryId" label="类目ID" align="center" width="110" />
                <el-table-column prop="freightTemplateId" label="邮费模板ID" align="center" width="110" />
                <el-table-column prop="sales" label="销量" align="center" width="110" />
                <el-table-column prop="unit" label="单位" align="center" width="110" />
                <el-table-column prop="status" label="是否在售" align="center" width="110">
                    <template #default="scope">
                        <el-tag :type="scope.row.status == 0 ? 'warning' : 'success'">
                            {{ scope.row.status == 0 ? '下架' : '在售' }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="description" label="描述" align="center" width="110" />
                <el-table-column label="操作" align="center" width="200">
                    <template #default="scope">
                        <el-button type="primary" @click="handlrEdit(scope.row)">编辑</el-button>
                        <el-button :type="scope.row.status == 0 ? 'primary' : 'warning'"
                            @click="handlerLowerShelf(scope.row)">
                            {{ scope.row.status == 0 ? '在售' : '下架' }}
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-dialog v-model="dialogVisible" title="商品详情" destroy-on-close>
                <div class="detail-image" v-html="goodsDetail"></div>
                <el-button @click="dialogVisible=false">取消</el-button>
            </el-dialog>
        </div>
        <div>
            <Paging v-bind="pagingDatas" @page-change="pageChange"></Paging>
        </div>
        <el-backtop :right="100" :bottom="100" ref="main" target=".main" :visibility-height="20" />
    </div>
</template>
<script lang="ts" setup>
import { Search, Plus } from '@element-plus/icons-vue'
import { ref, reactive, nextTick, watch } from 'vue'
import { post } from "@/utils/http";
import { ClassPagination } from "#/index";
import Paging from "@/components/paging/Paging.vue";
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from "vue-router";
//搜索的数据
const searchData = reactive({
    goodsTitle: '',
    goodsBarcode: '',
    goodsStatus: undefined,
    categoryId: ''
})
const router = useRouter()
const main = ref()  //滚动组件对象的引用
const dialogVisible = ref(false) //查看详情弹窗显示和隐藏
const goodsDetail = ref([]) //商品详情数组
const newSearchData = reactive({ ...searchData })
let pagingDatas = reactive(new ClassPagination) //请求分页的数据
const tableData: TypeGoodsList[] = reactive([]) //商品列表
const options: TypeCategory[] = reactive([]) //类目列表
const props = {
    emitPath: false,
    checkStrictly: true,
    value: 'id',
    label: 'title',
    children: 'childrenList'
}
const goodsStatus = reactive([
    {
        label: '下架',
        value: 0
    },
    {
        label: '在售',
        value: 1
    },
    {
        label: '全部',
        value: ''
    }
])
//加载商品列表
const loadGoodsList = () => {
    let data = {
        _gp: 'admin.product',
        _mt: 'list',
        page: pagingDatas.page,
        limit: pagingDatas.limit,
        categoryId: newSearchData.categoryId,
        title: newSearchData.goodsTitle,
        barcode: newSearchData.goodsBarcode,
        status: newSearchData.goodsStatus
    }
    post(data).then(res => {
        console.log(res);
        let { data, errno, errmsg } = res
        if (200 == errno) {
            tableData.length = 0
            pagingDatas.total = data.total
            tableData.push(...data.items)
        } else {
            ElMessage.error(errmsg)
        }
    })
}
loadGoodsList()
//类目列表
const lodeCategory = () => {
    let data = {
        _gp: 'admin.category',
        _mt: 'categoryTree'
    }
    if (options.length == 0) {
        post(data).then(res => {
            console.log(res);
            if (200 == res.errno) {
                options.length = 0
                options.push(...res.data)
            } else {
                ElMessage.error(res.errmsg)
            }
        })
    }
}
lodeCategory()

//添加
const handlerAddGoods = () => {
    router.push({name:'GoodsCreate'})
}
//编辑
const handlrEdit = (row: TypeGoodsList) => {
    router.push({name:'GoodsEdit',params:{id:row.id}})
}
//查看详情
const handlrSee = (row: TypeGoodsList) => {
    dialogVisible.value = true
    let data = {
        _gp: 'admin.product',
        _mt: 'detail',
        spuId: row.id
    }
    post(data).then(res => {
        console.log(res);
        let { data, errno, errmsg } = res
        if (200 == errno) {
            goodsDetail.value = data.detail
        } else {
            ElMessage.error(errmsg)
        }
    })
}

//改变当前上下架状态
const handlerLowerShelf = (row: TypeGoodsList) => {
    let data = {
        _gp:'admin.product',
        _mt:'freezeOrActivation',
        spuId:row.id,
        status:row.status==0?1:0
    }
    post(data).then(res=>{
        let {errno,errmsg} = res
        if(200==errno){
            ElMessage.success('修改成功')
            loadGoodsList()
        }else{
            ElMessage.error(errmsg)
        }
    })
}


//查找
const handlerSearch = () => {
    Object.assign(newSearchData, searchData)
    pagingDatas.page = 1
    loadGoodsList()
}
//分页组件每次调用事件
function pageChange(e: TypePaGing) {
    pagingDatas.page = e._page
    pagingDatas.limit = e._limit
    loadGoodsList()
    if (main.value != null || main.value == !undefined) {
        nextTick(() => {
            main.value.$el.click?.()
        })
    }
}
</script>
<style lang="less" scoped>
.main {
    >div {
        margin: 15px 0px;

        .el-input {
            width: 11vw;
        }
    }

    .goods-table {
        .detail-image {
            width: 100%;
            text-align: center;

            &::v-deep p {
                width: 100%;
            }

            &::v-deep p img {
                width: 100%;
            }

            &::v-deep img {
                max-width: 100%;
                height: auto;
            }
        }
         :deep(.el-dialog__body) {
            padding-top: 0px;
        }

        :deep(img) {
            width: 100%;
        }

        :deep(.desc_anchor) {
            // max-width: 100%;
            width: auto;
        }
    }
}
</style>